<script setup lang="ts" name="aiAgent">
import { useElementSize } from '@vueuse/core';
import {
  aiModelList,
  baseUrl,
  getMemoryListByUsername,
  getMemoryByChatId,
  getStreamText,
  stopAbort,
  useLoginUserStore,
  mdTool
} from '@/index';
import type { AIRequest } from '@/index.d';
import { dayjs } from 'element-plus';
import { useRequest } from 'vue-request';
const scrollbarContainerRef1 = useTemplateRef('scrollbarContainerRef1');
const scrollbarRef1 = useTemplateRef('scrollbarRef1');
const { height: height1 } = useElementSize(scrollbarContainerRef1);

const aiRequest = reactive<AIRequest>({
  model: 'qwen-max',
  userMessage: '',
  temperature: 0.8,
  username: useLoginUserStore().loginUser.username as string,
  conversationId: useLoginUserStore().loginUser.username + '-' + dayjs().toISOString(),
  response: '',
  aiLoading: false,
  documentIndex: 'sdw'
});

const title = computed(() => {
  return '提示词：' + aiRequest.userMessage;
});

const goToBottom = () => {
  scrollbarRef1.value?.scrollTo({
    top: scrollbarRef1.value?.wrapRef?.scrollHeight,
    behavior: 'smooth'
  });
};
const startGpt = async (event: Event) => {
  event.preventDefault();
  await getStreamText(baseUrl.value + '/ai/chat/getAgentStreamText', aiRequest, false);
  goToBottom();
};
const stopGpt = () => {
  stopAbort();
  aiRequest.aiLoading = false;
};

watch(
  () => aiRequest.response,
  () => goToBottom()
);
</script>
<template>
  <el-row class="ai-container" :gutter="1">
    <el-col :span="19">
      <el-card>
        <template #header>{{ title }}</template>
        <template #default>
          <div ref="scrollbarContainerRef1" class="scrollbar-container">
            <el-scrollbar ref="scrollbarRef1" :height="height1">
              <div class="scrollbar-container-content">
                <el-text v-html="aiRequest.response" />
              </div>
            </el-scrollbar>
          </div>
        </template>
        <template #footer>
          <el-form :model="aiRequest">
            <!-- <el-form-item label="模型：" for="model" style="width: 100%">
              <el-radio-group v-model="aiRequest.model">
                <el-radio
                  v-for="item in aiModelList"
                  :key="item"
                  :value="item"
                  :label="item"
                  :disabled="aiRequest.aiLoading"
                />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="温度：" for="temperature" style="width: 100%">
              <el-slider
                v-model="aiRequest.temperature"
                :min="0"
                :max="1"
                :step="0.1"
                :disabled="aiRequest.aiLoading"
              />
            </el-form-item> -->
            <el-form-item label="输入：" for="userMessage" style="width: 100%">
              <el-input
                v-model="aiRequest.userMessage"
                :readonly="aiRequest.aiLoading"
                @keydown.enter="startGpt"
              />
            </el-form-item>
            <el-form-item style="width: 100%">
              <el-button
                type="danger"
                style="width: 100%"
                @click="stopGpt"
                v-if="aiRequest.aiLoading"
              >
                输出生成中，可点击此处停止输出
              </el-button>

              <el-button type="success" style="width: 100%" @click="startGpt" v-else>
                发送
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-card>
    </el-col>
    <el-col :span="5">
      <el-card> </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.ai-container {
  height: 100%;
  width: 100%;
  padding: 5px;
  display: flex;
  flex-direction: row;

  .el-card {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    :deep(.el-card__body) {
      flex: 1;
      padding: 0;
      .scrollbar-container {
        height: 100%;

        .scrollbar-container-content {
          line-height: 2rem;
          padding: 20px 30px;
        }

        .scrollbar-container-content2 {
          padding: 5px;
          line-height: 2rem;
          display: flex;
          flex-direction: column;
          .el-link {
            justify-content: flex-start;
          }
        }
      }
    }
  }
}
</style>
